<template>
	<view class="page_box">
		<view class="head_box"></view>
		<uniImgUpload/>
		<form @submit="formSubmit" @reset="formReset">
			<view class="content_box">
				<!-- <view class="goods-box">
					<shopro-mini-card><block slot="goodsBottom"></block></shopro-mini-card>
				</view> -->

					<view class="goods-item x-bc" @tap="onSel(2)">
						<text class="item-title">退款原因</text>
						<picker :value="index" :range="refundList" name="rea">
							<view class="uni-input">{{refundList[index]}}</view>
						</picker>
					</view>
					<view class="goods-item x-f">
						<text class="item-title">退款金额：</text>
						<text class="price">￥16.00</text>
					</view>
					<view class="explain goods-item x-f">
						<text class="item-title">说明：</text>
						<input class="flex-sub" name="sm" value="" placeholder="选填" />
					</view>

					<view class="upload-img">
						<text class="upload-title">上传凭证</text>
						<input name="smimg" value="" style="display:none;"/>
						<view class="img-box">
							<view class="preview-box" v-for="(item, index) in imgList" :key="index">
								<image class="preview-img" :src="imgList[index]" mode="aspectFill"></image>
								<text class="cuIcon-close" @tap="DelImg(index)"></text>
							</view>
							<view class="choose-img x-c" @tap="chooseImg" v-if="imgList.length < 10"><text class="cuIcon-cameraadd"></text></view>
						</view>
					</view>
				
			</view>
			<view class="foot_box x-c">
				<button class="cu-btn sub-btn" form-type="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
// import shoproMiniCard from '@/components/shopro-mini-card/shopro-mini-card.vue';

import uniImgUpload from '@/components/uni-img-upload/uni-img-upload.vue';

import Schema from 'async-validator';
const descriptor = {
  name: {
    type: 'string',
	required: true,
	min:100,
	max:200,
	// message: "请填写名称"
  },
  age: {
    type: 'number',
    message: "为数字"
  },
};

const validator = new Schema(descriptor);
validator.validate({ name: '王', age: '23423' }).then(() => {
  // validation passed or without error message
}).catch(({ errors, fields }) => {
  return console.log( errors,fields);
});

export default {
	components: {
		// shoproMiniCard,
		uniImgUpload
	},
	data() {
		return {
			imgList: [],
			index: 0,
			refundList: [
					'不想要了',
					'无快递信息',
					'包裹为空',
					'已拒签包裹',
					'快递长时间未送达',
					'其他'
			],

			refundList2: {
				title: '退款原因',
				list: [
					{
						id: 1,
						val: '不想要了'
					},
					{
						id: 2,
						val: '拍错/多拍'
					},
					{
						id: 3,
						val: '与商品描述不符'
					},
					{
						id: 4,
						val: '质量问题'
					},
					{
						id: 5,
						val: '卖家发错货'
					},
					{
						id: 6,
						val: '其他'
					}
				]
			}
		};
	},
	computed: {},
	methods: {
		chooseImg() {
			let that = this;
			that.$tools.chooseImage(1).then(res => {
				that.imgList.push(res);
			});
		},
		DelImg(index) {
			uni.showModal({
				title: '删除照片',
				content: '确定要删除这张照片么？',
				cancelText: '取消',
				confirmText: '删除',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(index, 1);
					}
				}
			});
		},
		formSubmit: function(e) {
			console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			var formdata = e.detail.value
			uni.showModal({
				content: '表单数据内容：' + JSON.stringify(formdata),
				showCancel: false
			});
		}
	}
};
</script>

<style lang="scss">
.goods-box {
	background: #fff;
	padding: 30rpx 25rpx;
	margin-bottom: 20rpx;
}

.goods-item {
	height: 95rpx;
	background: #fff;
	padding: 0 25rpx;
	margin-bottom: 20rpx;
	border-top: 1rpx solid rgba(#dfdfdf, 0.5);

	&:nth-of-type(2n) {
		margin-bottom: 0;
		border-top: 0;
	}

	.item-title {
		font-size: 28rpx;
	}

	.cuIcon-right {
		font-size: 32rpx;
	}

	.price {
		font-size: 28rpx;
		color: #a8700d;
	}
}

.upload-img {
	background: #fff;
	padding: 30rpx 25rpx;

	.upload-title {
		font-size: 28rpx;
	}
}

.img-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 20rpx;

	.choose-img,
	.preview-box {
		width: 120rpx;
		height: 120rpx;
		background: rgba(249, 250, 251, 1);
		border: 1rpx solid rgba(223, 223, 223, 1);
		margin-right: 25rpx;
		margin-bottom: 25rpx;
		position: relative;

		&:nth-child(5n) {
			margin-right: 0;
		}

		.cuIcon-cameraadd {
			font-size: 50rpx;
			color: #dfdfdf;
		}

		.preview-img {
			width: 100%;
			height: 100%;
		}

		.cuIcon-close {
			background: linear-gradient(90deg, rgba(216, 159, 100, 1), rgba(235, 193, 150, 1));
			border-radius: 50%;
			width: 40rpx;
			line-height: 40rpx;
			color: #fff;
			text-align: center;
			position: absolute;
			top: -10rpx;
			right: -10rpx;
		}
	}
}

.foot_box {
	.sub-btn {
		width: 710rpx;
		height: 80rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		border: 1rpx solid rgba(238, 238, 238, 1);
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
		margin-bottom: 30rpx;
	}
}

.modal-box {
	width: 750rpx;
	height: 680rpx;
	border-radius: 30rpx 30rpx 0 0;
	background: #fff;

	.modal-head {
		height: 100rpx;
		font-size: 30rpx;
	}

	.modal-content {
		font-size: 28rpx;

		.sel-item {
			height: 100rpx;
			width: 100%;
			padding: 0 20rpx;
			border-bottom: 1rpx solid rgba(223, 223, 223, 0.5);

			.sel-radio {
				transform: scale(0.7);
			}
		}
	}

	.modal-foot {
		.close-btn {
			width: 710rpx;
			height: 80rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
		}
	}
}
</style>
